import { useRef, useState } from "react";
import { ImperativePanelHandle, Panel, PanelResizeHandle } from "react-resizable-panels";
import { StretchBtn } from "../StretchBtn";
import { Sidebar, menuItems } from "./components/Sidebar";
import { MaterialTab } from "./components/MaterialTab";
import { Outline } from "./components/Outline";
import { Source } from "./components/Source";
export function MaterialWrapper() {
  const [visible, setVisible] = useState(true);
  const ref = useRef<ImperativePanelHandle>(null);
  // 控制side-panel状态
  const collapsePanel = () => {
    setVisible(!visible);

    const panel = ref.current!;
    visible ? panel.collapse() : panel.expand();
  };

  const [selectedKey, setSelectedKey] = useState("components");
  const selectMenu=(val:string)=>{
    setSelectedKey(val)
    !visible && collapsePanel()
  }
  const activeClass = (key: string) => {
    return key === selectedKey ? "opacity-100 h-full" : "hidden opacity-0 duration-200";
  };
  const curItem = menuItems.find(item => item.key === selectedKey)!;

  return (
    <>
      <Sidebar selectedKey={selectedKey} selectMenu={selectMenu} />
      <Panel style={{ flexBasis: `${visible ? 260 : 0}px` }} ref={ref} collapsible maxSize={60} id="sidebar" order={1}>
        <div className="flex flex-col h-full bg-white border-l-[1px] border-gray-200">
          <header className="my-[10px] px-3 text-sm font-medium">{curItem.label}</header>
          <main className="flex-1 h-20 pb-3">
            <div className={activeClass("components")}>
              <MaterialTab  />
            </div>
            <div className={activeClass("outline")}>
              <Outline />
            </div>
            <div className={activeClass("source")}>
              <Source/>
            </div>
          </main>
        </div>
      </Panel>
      <PanelResizeHandle className="relative" disabled={!visible}>
        <StretchBtn defaultDirection="right" expand={visible} toggleFn={() => collapsePanel()} />
      </PanelResizeHandle>
    </>
  );
}
